<script>

import headAssembly from "@/components/headAssembly.vue";
import carouselComponent from "@/components/carouselComponent.vue";
// import CarouselComponent from "@/components/carouselComponent.vue";
// import HeadAssembly from "@/components/headAssembly.vue";

export default {
  name: "indexvuePage",
  data(){
    return{
      com:carouselComponent,
      type:'free',
      obj:{
        name:'zs'
      }
    }
  },
  methods:{
    getS(data){
      // console.log('传递的数据'+data)
      console.log(JSON.parse(data))
    }
  },
  // 和data平级  存放组件  导入组件
  components:{
    headAssembly,
    carouselComponent,
  }
}
</script>

<template>

<!--  父传子：
          1、在父组件的子标签（子组件）中添加一个自定义属性
          2、在子组件中有一个props属性，和data平级，属性名是自定义属性，属性值可以是类型
          父传子传过来的属性不能发生改变
-->
<div>
<!--  组件当作标签使用-->
  <headAssembly :type1="type">header</headAssembly>
  <headAssembly :object="obj">header</headAssembly>

<!--  子传父：
           1、在父组件的子标签中，自定义一个事件,事件里边的参数就是子组件传递的数据
           2、在子组件中有一个方法 this.$emit(自定义事件名，传递的数据)用来传递参数-->
  <headAssembly>header</headAssembly>
  <carouselComponent class="swiper"  @getSon="getS">swiper</carouselComponent>
<!--  在component标签中，有一个is属性也可以用来展示标签-->
  <component :is="com"></component>
</div>

<!--  路由重定向  redirect-->
<!--  路由高亮
     设置类名样式：router-link-active
        自定义类名（在路由里配置）：linkActiveClass放在vue路由实例里面，类名为active
-->

<!--  路由嵌套：
          声明路由的时候设置children,children是一个数组，数组里是路由对象
          在设置children的父组件里加上router-view标签显示
-->
<!--  命名视图：
            一个路径可以对应多个组件
            将component改成components，在负组件中用router-view里面的name属性进行显示
-->
</template>

<style scoped lang="less">
.swiper{
  margin-top: -50px;
}
</style>